<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <uv-search placeholder="请输入产品" v-model="search" :showAction="false" bgColor="#f7f8fa" @search="OnSearch"></uv-search>
            </view>
        </view>

        <scroll-view class="list" :scroll-y="true" :refresher-triggered="refresh" :refresher-enabled="true" @refresherrefresh="OnRefresh" @scrolltolower="OnScrollTolower" refresher-background="#fff0" :style="`height: ${WidowHeight}px;`">
            <view class="item" v-for="(item,index) in list" :key="item.id">
                <view class="title">
                    {{ item.products.name }}
                </view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{ item.query_num ?? 0 }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value">
                            {{ item.query_code }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{ item.query_time_text }}
                        </view>
                    </view>

                    <view class="son-item" @click="OnOpenQrCode(item,index)">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <uv-load-more :status="status" />

            <!-- <uv-back-top></uv-back-top> -->
        </scroll-view>
    </view>

    <!-- 消息提示 -->
	<uv-toast ref="NoticeRef"></uv-toast>

    <!-- 弹出层 -->
    <uv-popup ref="PopupRef" :safeAreaInsetBottom="false" :round="'10px'" mode="center">
        <view class="qrcode">
            <uv-image :showLoading="true" :src="QrCode" width="240px" height="240px"></uv-image>
        </view>
    </uv-popup>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

const search = ref('');

const NoticeRef = ref(null);

const QrCode = ref('');
const PopupRef = ref(null);

// 下拉刷新状态
const refresh = ref(false);
// 上拉加载结束状态
const finished = ref(false);
// 数据
const list = ref([]);
// 当前页
const page = ref(1);
// 每页显示的数据条数
const limit = ref(10);
// 加载更多状态
const status = ref('loading');

const WidowHeight = ref(0);

onLoad(() =>
{
    // 获取设备信息
    uni.getSystemInfo({
        success:(res) =>
        {
            WidowHeight.value = res.windowHeight;
        }
    });

    GetProductData();
});

const OnRefresh = () =>
{
    if(refresh.value === true) return false;

    page.value = 1;
    list.value = [];
    refresh.value = true;
    finished.value = false;
    status.value = 'loading';

    setTimeout(GetProductData,1500);
}

const OnScrollTolower = () =>
{
    if(finished.value === true) return false;

    GetProductData();
}

const GetProductData = async () =>
{
    if(refresh.value === true) refresh.value = false;

    const params = {
        busid:business.value.id,
        page:page.value,
        limit:limit.value,
        search:search.value
    }

    const result = await uni.$uv.http.post('/business/list',params);

    if(result.code === 1)
    {
        const count = result.data ? result.data.count : 0;
        list.value = result.data ? list.value.concat(result.data.list) : [];

        if(list.value.length >= count)
        {
            finished.value = true;
            status.value = 'nomore';

            return false;
        }

        page.value += 1;
    }else{
        finished.value = true;
        status.value = 'nomore';

        NoticeRef.value.show({
            type:'error',
            message:result.msg
        });
    }
}

const OnSearch = () =>
{
    OnRefresh();
}

const OnOpenQrCode = async (item,index) =>
{
    if(item.query_qrcord)
    {
        QrCode.value = item.query_qrcord_text;
    }else{
        const params = {
            code:item.query_code
        }

        const result = await uni.$uv.http.post('/business/generate',params);

        if(result.code === 1)
        {
            QrCode.value = result.data.query_qrcord_text;
            list.value[index].query_qrcord = result.data.query_qrcord;
            list.value[index].query_qrcord_text = result.data.query_qrcord_text;
        }else{
            NoticeRef.value.show({
                type:'error',
                message:result.msg
            });

            return false;
        }
    }

    PopupRef.value.open();
}
</script>

<style lang="scss">
@import '@/static/styles/theme.scss';

page {
    background-color: $bg-color;
}

.container {
    @extend .page-container;

    .header {
        @extend .card;
        padding: 20rpx;

        .search {
            width: 100%;
            
            :deep(.uv-search) {
                background-color: rgba($primary-color, 0.05);
                border-radius: 12px;
                padding: 10rpx;
            }
        }
    }

    .list {
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        background-color: transparent;
    }

    .item {
        @extend .card;
        padding: 30rpx;

        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: $text-primary;
            margin-bottom: 20rpx;
        }

        .line {
            height: 1px;
            background-color: $border-color;
            margin: 20rpx 0;
        }

        .son-list {
            .son-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 1px solid $border-color;

                &:last-child {
                    border-bottom: none;
                }

                .name {
                    color: $text-secondary;
                    font-size: 28rpx;
                }

                .value {
                    color: $text-primary;
                    font-size: 28rpx;

                    image {
                        width: 60rpx;
                        height: 60rpx;
                    }
                }
            }
        }
    }
}

.qrcode {
    padding: 40rpx;
    background-color: $card-bg;
    border-radius: 16px;
    text-align: center;
}
</style>